<template>
    <div class="regulations-statute" @click="click">
        <nuxt-link
            v-if="pathUrl"
            class="regulations-statute-title"
            target="_blank"
            :to="pathUrl"
        >
            {{ item.title ? item.title : item.name }}
        </nuxt-link>
        <div
            v-else
            v-html="item.title ? item.title : item.name"
            class="regulations-statute-title"
        ></div>
        <div
            v-if="item.info_content"
            class="regulations-statute-abstract"
            v-html="getText(item.info_content, 110)"
        ></div>
        <div class="statute-b">
            <el-descriptions :column="4">
                <template slot="title">
                    <div></div>
                </template>
                <el-descriptions-item label="发文字号" :span="2">
                    {{ item.push_number }}
                </el-descriptions-item>
                <el-descriptions-item label="效力注释">{{
                    item.active_info
                }}</el-descriptions-item>
                <el-descriptions-item label="发文日期">{{
                    item.push_date
                }}</el-descriptions-item>
            </el-descriptions>
        </div>
        <div class="tips" v-if="tipEnable" @click.stop="cancelCollect">
            <img src="~/assets/images/userCenter/1_shanchu.png" alt="" />
            <span class="c999 fz14 mt10">取消收藏</span>
        </div>
    </div>
</template>

<script>
import { getText } from "@/assets/utils/utils";
export default {
    name: "statute",
    components: {},
    props: {
        item: {
            type: Object,
            default: function () {
                return {
                    title: "",
                    name: "",
                    info_content: "",
                    push_number: "",
                    active_info: "",
                    push_date: "",
                };
            },
        },
        pathUrl: {
            type: String,
            default: "",
        },
        tipEnable: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            getText: getText,
        };
    },
    mounted() {},
    watch: {},
    methods: {
        click() {
            this.$emit("click");
        },
        cancelCollect() {
            this.$emit("cancelCollect", this.item);
        },
    },
};
</script>

<style lang="scss">
@import url("@/assets/static/reset.css");

.regulations-statute {
    position: relative;
    // display: flex;
    // justify-content: center;

    .statute-b {
        border-bottom: 1px solid #efefef;
        padding-bottom: 12px;
    }

    .regulations-statute-title {
        width: 100%;
        font-weight: 800;
        font-size: 18px;
        display: block;
        &:hover {
            text-decoration: underline;
        }
    }
    .el-descriptions__header {
        margin-bottom: 10px;
    }
    .regulations-statute-abstract {
        margin-top: 10px;
        font-size: 14px;
        line-height: 20px;
        overflow: hidden;
        // white-space: nowrap;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* 这里设置的是文本的最大行数 */
        -webkit-box-orient: vertical;
        height: 40px;
        p,
        span,
        a {
            line-height: 20px !important;
            white-space: break-spaces;
            margin: 0;
            padding: 0;
        }

        img {
            display: none;
        }
    }

    .tips {
        position: absolute;
        top: 1px;
        right: 37px;
        display: none;

        img {
            display: inline-block;
            padding: 0;
            margin: 0;
            width: 26px;
            height: 26px;
            vertical-align: middle;
        }
    }

    padding: 24px 34px 0 34px;

    &:hover {
        background: #f4f8ff;
        .regulations-statute-title {
            color: #1c87f3;
        }
        .tips {
            display: block;
        }
    }

    .el-descriptions__body {
        background-color: transparent;
    }

    .el-descriptions-item__label:not(.is-bordered-label) {
        color: #1c87f3;
    }

    .el-descriptions__title {
        font-size: 16px;
        font-weight: 400;
        color: #333333;
    }
    .el-descriptions-item__container {
        font-size: 13px;
        color: #999999;
    }
}
</style>
